<template>
  <div class="patientInfo-container">
    <leftCardPannel>
      <patient-card :id="pid" />
    </leftCardPannel>
    <div class="right-info">
      <el-tabs v-model="activeTags" type="border-card">
        <el-tab-pane label="筛查" name="Screening">
          <screening
            v-if="activeTags === 'Screening'"
            type="screening"
            :pid="pid"
          ></screening>
        </el-tab-pane>
        <el-tab-pane label="个人信息" name="personInfo">
          <person-info-card :id="pid"></person-info-card>
        </el-tab-pane>
        <el-tab-pane label="评估" name="Assessment">
          <screening
            v-if="activeTags === 'Assessment'"
            type="assessment"
            :pid="pid"
          ></screening>
        </el-tab-pane>
        <!-- <el-tab-pane label="筛查评估" name="screening">
          <screening v-if="activeTags === 'screening'" :pid="pid"></screening>
        </el-tab-pane> -->
        <el-tab-pane label="电子病历" name="emr">
          <emr-chart :id="pid"></emr-chart>
        </el-tab-pane>
        <el-tab-pane label="患者追踪" name="patientTrack">
          <patient-data></patient-data>
        </el-tab-pane>
      </el-tabs>
      <medical-history-info v-if="activeTags === 'personInfo'" :id="pid" />
      <emr-history v-if="activeTags === 'emr'" />
    </div>
  </div>
</template>
<script>
  import PatientCard from '@/components/PatientCard'
  import { onBeforeMount, ref } from 'vue'
  import {
    personInfoCard,
    medicalHistoryInfo,
    emrChart,
    emrHistory,
    patientData,
  } from './components'
  import screening from '@/views/reception/components/screening.vue'
  import { useRoute } from 'vue-router'
  // import XMPlayer from '@/components/XMPlayer/index.vue'
  export default {
    name: 'patientInfo',
    components: {
      PatientCard,
      personInfoCard,
      medicalHistoryInfo,
      emrChart,
      emrHistory,
      patientData,
      screening,
    },
    setup() {
      const route = useRoute()

      function initActiveTags(str) {
        if (route.query.anchorType === 'markCard') {
          return ref('patientTrack')
        }
        return ref('personInfo')
      }
      const activeTags = initActiveTags()
      let pid = ref(null)

      onBeforeMount(() => {
        if (route.query.id) {
          pid.value = parseInt(route.query.id)
          console.log('pid =' + pid.value)
        }
        if (route.query.emrId) {
          activeTags.value = 'emr'
        }
      })
      return {
        activeTags,
        pid,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .patientInfo-container {
    padding: 32px;
    // min-height: calc(100vh - 50px);
    display: flex;

    .left-info {
      // width: 20%;
    }
    .right-info {
      flex: 1;
      overflow: hidden;
    }
  }
</style>
